<template>
  <div class="autocompleteList" v-show="this.autocompleteList">
    <template v-for="(item, index) in autocompleteList">
      <a class="mint-cell mint-cell-swipe" @click="choose_address(index)">
        <div class="addressList">
           <div class="names">{{item.name}}</div>
           <div class="itemname">{{item.district}}{{item.address}}</div>
        </div>
      </a>
    </template>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data () {
    return {
      exist: ''
    }
  },
  created () {
      this.setAutocompleteList('')
  },
  computed: {
    ...mapGetters([
      'autocompleteList'
    ])
  },
  methods: {
    choose_address(index) {
      let adressInfo = this.autocompleteList[index].district + this.autocompleteList[index].name
      if(localStorage.getItem('parmas') === 'ups') {
        this.setSearchBoxInfo(adressInfo)
        localStorage.setItem('lat1', this.autocompleteList[index].location.lat)
        localStorage.setItem('lng1', this.autocompleteList[index].location.lng)
      }else if (localStorage.getItem('parmas') === 'downs') {
        this.setDestination(adressInfo)
        localStorage.setItem('lat2', this.autocompleteList[index].location.lat)
        localStorage.setItem('lng2', this.autocompleteList[index].location.lng)
      }else if(localStorage.getItem('parmas') == 2) {
        this.setUpAddress(adressInfo)
        localStorage.setItem('lat1', this.autocompleteList[index].location.lat)
        localStorage.setItem('lng1', this.autocompleteList[index].location.lng)
      }else if(localStorage.getItem('parmas') == 3) {
        this.setDownAddress(adressInfo)
        localStorage.setItem('lat2', this.autocompleteList[index].location.lat)
        localStorage.setItem('lng2', this.autocompleteList[index].location.lng)
      }
      if(localStorage.getItem('parmastype') == 2 || localStorage.getItem('parmastype') == 3) {
        this.$router.push({path: '/surePrice'})
      }else{
        this.$router.push({path: '/index'})
      }
    },
    ...mapMutations({
      setSearchBoxInfo: 'SET_SEARCHBOXINFO',
      setDestination: 'SET_DESTINATION',
      setUpAddress: 'SET_UPADDRESS',
      setDownAddress: 'SET_DOWNADDRESS',
      setAutocompleteList: 'SET_AUTOCOMPLETELIST'
    })
  }
}
</script>
<style>
.autocompleteList{
  position: absolute;
  z-index: 999;
  width: 100%;
  top: 50px;
  left: 0;
  background-color: #fff;
  box-sizing: border-box;
  overflow-x: hidden;
}
.autocompleteList a{
   font-size: 14px;
   font-family: '微软雅黑';
   display: block;
   width:100%;
   overflow: hidden;
   border-bottom:1px solid #e1e1e1;
   text-align: left;
   padding:12px 0 12px 45px;
   background: url("../../../static/img/tubiao.png") 20px center no-repeat;
   font-family: '微软雅黑';
}
.mint-cell-wrapper {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e1e1e1;
}
  .names{
    margin-bottom: 7px;
    color: #333;
    font-size: 16px;
  }
</style>
